<template>
  <div class="dashboard-editor-container">

    <template v-if="statisticsData">
      <IndexStatistics v-hasPermi="['index:query:home']" :statistics-data="statisticsData" />
    </template>

    <div v-hasPermi="['index:query:table']" class="mt-22">
      <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="init">
        <template slot="datetimeRange">
          <YxhyDatetimeRange :start-date.sync="queryTimeRange.dt_start_search" :end-date.sync="queryTimeRange.dt_end_search" />
        </template>
        <template #selectRemote>
          <YxhySelectRemote
            :value.sync="queryParams.product_id_search"
            :request-fn="queryListNonSortMp"
            :request-key="`product_name_search`"
            :response-id="`product_id`"
            :response-name="`product_name`"
            :placeholder="`请输入小程序名称`"
          />
        </template>
        <el-form-item slot="button">
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-form-item>
      </YxhyTableQuery>

      <YxhyTableData
        :columns="columns"
        :data="tableList"
        :loading="loading"
        :stripe="false"
        :other-config="{
          'summary-method': getSummaries,
          'show-summary': true
        }"
      >
        <!-- 点击数插槽 -->
        <template #click_number>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <p class="font-color-th">点击数</p>
              <p class="font-color-th">点击率</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">{{ row.tap_num }}</p>
              <p class="font-color-td">{{ row.tap_rate }}%</p>
            </template>
          </el-table-column>
        </template>
        <!-- 累计注册插槽 -->
        <template #accumulate_register>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <p class="font-color-th">新注册用户</p>
              <p class="font-color-th">活跃用户</p>
              <p class="font-color-th">累计注册</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">{{ row.reg_num }}</p>
              <p class="font-color-td">{{ row.active_num }}</p>
              <p class="font-color-td">{{ row.total_num }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 总充值金额插槽 -->
        <template #total_money>
          <el-table-column label="总充值金额" align="center" width="auto">
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.total_money }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 新增充值金额插槽 -->
        <template #add_pay_total_money>
          <el-table-column label="新增充值金额" align="center" width="auto">
            <template slot-scope="{ row }">
              <!-- 普通充值金额 + 会员充值金额  -->
              <p class="font-color-td">￥{{ row.addPayMoney }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 人均充值金额插槽 -->
        <template #user_avg_money>
          <el-table-column label="人均充值金额" align="center" width="auto">
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.user_avg_money }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 平均充值金额插槽 -->
        <template #avg_money>
          <el-table-column label="平均充值金额" align="center" width="auto">
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.avg_money }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 消耗金额插槽 -->
        <template #consume_money>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <div class="flex jc-center">
                <p class="font-color-th">消耗金额</p>
                <SortIcon :query-params.sync="queryParams" this-key="invest_money" @refresh="init" />
              </div>
              <p class="font-color-th">投产比ROI</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.invest_money }}</p>
              <p class="font-color-td">{{ row.ROI }}</p>
            </template>
          </el-table-column>
        </template>
        <!-- 普通充值金额插槽 -->
        <template #coin_pay_people>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <p class="font-color-th">普通充值金额</p>
              <p class="font-color-th">笔数</p>
              <p class="font-color-th">完成率</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.coin_money }}</p>
              <p class="font-color-td">{{ row.coin_total_order }}</p>
              <p class="font-color-td">{{ row.coin_order_finish_percent }}%</p>
            </template>
          </el-table-column>
        </template>
        <!-- 会员充值金额插槽 -->
        <template #vip_pay_people>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <p class="font-color-th">会员充值金额</p>
              <p class="font-color-th">笔数</p>
              <p class="font-color-th">完成率</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.vip_money }}</p>
              <p class="font-color-td">{{ row.vip_total_order }}</p>
              <p class="font-color-td">{{ row.vip_order_finish_percent }}%</p>
            </template>
          </el-table-column>
        </template>

      </YxhyTableData>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryPage.pageNum"
        :limit.sync="queryPage.limit"
        @pagination="init"
      />

    </div>

  </div>
</template>

<script>

import IndexStatistics from '@/components/IndexStatistics/index.vue'
import SortIcon from '@/components/SortIcon/index.vue'
import { queryListNonSortMp } from '@/api/miniProgram/mp'
import { columnsStatic } from '@/views/Ds'
import { queryHomeIndex, queryHomeList } from '@/api/index'
import { formatDate } from '@/utils'
import store from '@/store'
import { percentageNewIntl, twoDigitsNewIntl } from '@/utils/numberNewIntl'

export default {
  name: 'Index',
  components: {
    IndexStatistics,
    SortIcon
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      loading: false,
      // 表格列
      columns: columnsStatic,

      // 查询参数
      queryParams: {
        product_id_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        type: 'datetimeRange',
        param: 'dt_start_search'
      }, {
        label: '',
        placeholder: '请输入小程序名称',
        type: 'selectRemote',
        param: 'product_id_search'
      }],
      queryTimeRange: {
        dt_start_search: undefined,
        dt_end_search: undefined
      },
      queryListNonSortMp,

      statisticsData: undefined
    }
  },
  created() {
    this.queryStatistics()
    this.init()
  },
  methods: {
    async queryStatistics() {
      const data = await queryHomeIndex()
      this.statisticsData = data
    },
    async init() {
      this.loading = true
      const res = await queryHomeList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      res.data.forEach(e => {
        const {
          tap_rate,
          coin_order_finish_percent,
          vip_order_finish_percent,
          total_money,
          invest_money,
          new_pay_coin_money,
          new_pay_vip_money
        } = e
        e.tap_rate = percentageNewIntl(tap_rate)
        e.coin_order_finish_percent = percentageNewIntl(coin_order_finish_percent)
        e.vip_order_finish_percent = percentageNewIntl(vip_order_finish_percent)
        e.addPayMoney = twoDigitsNewIntl(Number(new_pay_coin_money) + Number(new_pay_vip_money))

        if (invest_money === '0.00') e.ROI = 0
        else e.ROI = twoDigitsNewIntl(Number(total_money) / Number(invest_money))
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    /** 合计计算 */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      console.log(param)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // 总充值金额
        if (index == 3) {
          const values = data.map(item => {
            // 去掉所有逗号
            const _number = item.total_money.replace(/,/g, '')
            return Number(_number)
          })
          const sumMoney = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)

          sums[index] = '￥' + twoDigitsNewIntl(sumMoney)
        }
      })

      return sums
    },

    /** 导出按钮 */
    async handleExport() {
      this.download(
        `/home/list?page=${this.queryPage.pageNum}`,
        {
          ...this.queryPage,
          ...this.queryParams,
          ...this.queryTimeRange,
          export: 1
        },
        `data_${new Date().getTime()}.xlsx`
      )
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  position: relative;
}

</style>
